<template>
  <View class="container">
    <View class="navigation-bar" :style="{ height: contentTop }">
      <view class="navigation" :style="{ position: 'fixed', top: menuTop, height: menuHeight }">
        <image mode="widthFix" :src="`${imgBasePath}newtask/go-back.png`" class="go-back" @click="goBack()"></image>
        <Text class="title" v-if="videoTotal - videoProgress">再向下滑 {{ videoTotal - videoProgress }} 个可完成任务</Text>
        <Text class="title" v-else>看短视频任务已完成</Text>
      </view>
    </View>
    <VideoList :videoParams="videoParams" @onShowInvestigatePopup="onShowInvestigatePopup" :disableTouch="true"
      @onUpdateTaskProgress="taskProgress" />
    <!-- 遮罩层  -->
    <View v-if="showRetainModal || isVideoEnd" class="mask" :style="{height: 'calc(100% - ' + contentTop + ')', top: contentTop}"></View>
    <View class="investigate-popup" v-if="showInvestigatePopup && !isVideoEnd">
      <View class="title">您觉得这个视频怎么样？</View>
      <View class="button-wrap">
        <View class="button" @click="isInterested()">
          <image mode="widthFix" :src="`${imgBasePath}newtask/smiling-face.png`"></image>
          <Text>感兴趣</Text>
        </View>
        <View class="button" @click="onInterested()">
          <image mode="widthFix" :src="`${imgBasePath}newtask/crying-face.png`"></image>
          <Text>没意思</Text>
        </View>
      </View>
    </View>
    <View class="retain-modal-view" v-if="showRetainModal">
      <View class="title">任务还没完成</View>
      <View class="tip">再看 {{ videoTotal - videoProgress }} 个视频即可完成任务</View>
      <View class="button-wrap">
        <View class="button" @click="back">仍然离开</View>
        <View class="separator"></View>
        <View class="button confirm" @click="continueLook">继续看</View>
      </View>
    </View>
    <View class="task-complete-container" v-if="isVideoEnd">
      <image mode="widthFix" :src="`${imgBasePath}newtask/task-complete.png`" class="task-complete"></image>
      <View class="task-complete-view">
        <View class="reward">
          <Text class="number">{{reward}}</Text>
          <Text class="unit">元</Text>
        </View>
        <View class="button" @click="goToNewPeopleTask()"></View>
      </View>
    </View>
  </View>
</template>
<script>
import VideoList from "./components/video-list.vue";
import { imgBasePath, trackingHost } from "@/common/config";
export default {
  name: "taskVideo",
  components: {
    VideoList
  },
  data() {
    return {
      menuButtonInfo: {},
      videoList: [],
      videoParams: null,
      showInvestigatePopup: true,
      videoTotal: 0,
      videoProgress: 0,
      showRetainModal: false,
      reward: null,

      menuHeight: uni.getStorageSync('menuInfo').menuHeight,
      menuTop: uni.getStorageSync('menuInfo').menuTop,
      contentTop: uni.getStorageSync('menuInfo').contentTop,
      imgBasePath,
      startTime: Date.parse(new Date()),
    }
  },
  onLoad(data) {
    const { taskType, taskId, activityId, reward } = data;
    this.reward = reward;
    this.videoParams = {
      taskId: +taskId,
      activityId: +activityId,
      taskType,
    }

    this.taskProgress();
    this.videoTask({page: "videoTask", event: "impression" });
  },
  onUnload() {
    const endTime = Date.parse(new Date());
    const st = (endTime - this.startTime) / 1000;
    this.videoTask({page: "videoTask", event: "sessionTime", st});
  },
  onShow() {

  },
  created() {
    this.setNavigateBar();
  },
  computed: {
    isVideoEnd: function() {
      return !!this.videoProgress && this.videoTotal == this.videoProgress;
    }
  },
  methods: {
    videoTask({page, event, st, element, cid}) {
      const { unionid, openid } = uni.getStorageSync("userInfo");
      const storeId = uni.getStorageSync("storeId");
      const params = {
        oid: openid,
        uid: unionid,
        sid: storeId,
        ts: Date.parse(new Date()) / 1000,
        event,
        page,
        st,
        cid,
        element,
      }
      this.$request("event-tracking/user", { host: trackingHost, params })
        .catch(() => { })
    },
    // 跳到新人任务页面
    goToNewPeopleTask() {
      uni.navigateBack();
    },
    // 显示弹框
    onShowInvestigatePopup(contentId) {
      // 当前播放的视频Id
      this.contentId = contentId;
      this.showInvestigatePopup = true;
    },
    // 查询任务进度
    taskProgress() {
      const { taskId, activityId } = this.videoParams;
      this.$request("marketing/task/progress", { method: "GET", params: { taskId, activityId } })
        .then(data => {
          const { total, progress } = data;
          this.videoTotal = total;
          this.videoProgress = progress;
        })
        .catch(() => { })
    },
    // 感兴趣操作
    isInterested() {
      this.videoTask({page: "videoPage", event: "click", element: 1, cid: this.contentId})
      this.showInvestigatePopup = false;
    },
    // 不感兴趣
    onInterested() {
      this.videoTask({page: "videoPage", event: "click", element: 0, cid: this.contentId})
      this.showInvestigatePopup = false;
    },
    // 返回按钮
    goBack() {
      this.showRetainModal = true;
      this.videoTask({page: "videoTaskRetainPop", event: "impression"});
    },
    back() {
      this.videoTask({page: "videoTaskRetainPop", event: "click", element: 0});
      uni.navigateBack();
    },
    continueLook() {
      this.videoTask({page: "videoTaskRetainPop", event: "click", element: 1});
      this.showRetainModal = false;
    },
    setNavigateBar: function () {
      uni.getSystemInfo({
        success: (res) => {
          this.statusBarHeight = res.statusBarHeight;
        }
      })
      const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
      this.menuButtonInfo = menuButtonInfo;
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.navigation-bar {
  background-color: #000;
  width: 100%;
  .navigation {
    box-sizing: content-box;
    color: #fff;
    font-size: 30.8rpx;
    display: flex;
    align-items: center;

    .title {
      padding: 0 30rpx;
      border-radius: 36.23rpx;
      border: 1.81rpx solid rgba(255, 255, 255, 0.30);
      font-family: "PingFangSC-Medium";
      font-weight: 500;
    }
  }

  .go-back {
    width: 16.3px;
    margin: 0 10px 0 10px;
  }

}

.video-list {
  flex: 1;
}


.investigate-popup {
  position: fixed;
  width: calc(100% - 58rpx);
  left: 29rpx;
  bottom: 80rpx;
  z-index: 2;
  background-color: #222222;
  border-radius: 38.04rpx;
  padding: 36.23rpx 72.46rpx 56.85rpx;

  .title {
    text-align: center;
    color: #999999;
    font-size: 36.23rpx;
    font-weight: 500;
    font-family: "PingFangSC-Medium";
  }

  .button-wrap {
    margin-top: 45.79rpx;
    display: flex;
    justify-content: space-between;

    .button {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 43.48rpx;
      font-weight: 600;
      font-family: "PingFangSC-Semibold";

      image {
        width: 49.52rpx;
        height: 49.52rpx;
        margin-right: 22rpx;
      }
    }
  }
}

.mask {
  position: fixed;
  width: 100%;
  left: 0;
  z-index: 1;
}

.retain-modal-view {
  position: absolute;
  width: calc(100% - 140rpx);
  background: #FFFFFF;
  border-radius: 20rpx;
  z-index: 4;
  text-align: center;

  .title {
    font-family: "PingFangSC-Medium";
    font-size: 60rpx;
    color: #1F1F1F;
    font-weight: 500;
    padding-top: 60rpx;
  }

  .tip {
    font-family: "PingFangSC-Regular";
    font-size: 40rpx;
    color: #525252;
    font-weight: 400;
    padding-top: 50rpx;
    margin-bottom: 60rpx;
  }

  .button-wrap {
    display: flex;
    justify-content: space-around;
    border-top: 1rpx solid #EEEEEE;
    height: 120rpx;
    .button {
      line-height: 120rpx;
      font-family: "PingFangSC-Regular";
      font-size: 45rpx;
      color: #333333;
      text-align: center;
      font-weight: 400;
      width: calc((100% - 1rpx) / 2);
    }
    .confirm {
      color: #28B57F;
    }
    .separator {
      height: 100%;
      width: 1rpx;
      background-color: #EEEEEE;
    }
  }
}
.task-complete-container {
  position: absolute;
  z-index: 3;
  .task-complete {
    width: 100vw;
  }
  .task-complete-view {
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    .reward {
      margin-top: 150rpx;
      color: #FD3236;

      .number {
        font-size: 120rpx;
        font-family: "Futura-Bold";
        font-weight: 700;
      }
      .unit {
        font-family: "PingFangSC-Medium";
        font-size: 60rpx;
        font-weight: 500;
        margin-left: 10rpx;
      }
    }
    .button {
      display: inline-block;
      margin-top: 135rpx;
      width: 380rpx;
      height: 110rpx;
    }
  }
}
</style>